<cds-modal size="lg"
           [open]="open"
           [hasScrollingContent]="true"
           (overlaySelected)="closeModal()">
  <cds-modal-header (closeSelect)="closeModal()">
    <h3 cdsModalHeaderHeading
        i18n>
    {{ action | titlecase }} {{ resource | upperFirst }}
    </h3>
  </cds-modal-header>

  <ng-container *cdFormLoading="loading">
    <div cdsModalContent>
      <form name="snapScheduleForm"
            #formDir="ngForm"
            [formGroup]="snapScheduleForm"
            novalidate>
        <!-- Directory -->
        <div class="form-item">
          <cds-text-label for="directory"
                          i18n
                          cdRequiredField="Directory"
                          [invalid]="snapScheduleForm.controls.directory.invalid && (snapScheduleForm.controls.directory.dirty)"
                          [invalidText]="directoryError"
                          [skeleton]="directoryStore.isLoading"
                          modal-primary-focus>
            <ng-container *ngIf="!directoryStore.isLoading">Directory (required)</ng-container>
            <input cdsText
                   type="text"
                   formControlName="directory"
                   name="directory"
                   [ngbTypeahead]="search"
                   [invalid]="snapScheduleForm.controls.directory.invalid && (snapScheduleForm.controls.directory.dirty)"
                   [placeholder]="directoryStore.isLoading ? '' : 'Directory path'"
                   [skeleton]="directoryStore.isLoading"/>
          </cds-text-label>
          <ng-template #directoryError>
            <span class="invalid-feedback"
                  *ngIf="snapScheduleForm.showError('directory', formDir, 'required')"
                  i18n>This field is required.</span>
            <span class="invalid-feedback"
                  *ngIf="snapScheduleForm.showError('directory', formDir, 'notUnique')"
                  i18n>A snapshot schedule for this path already exists.</span>
          </ng-template>
        </div>

        <!--Start date -->
        <cd-date-time-picker
          name="Start Date"
          helperText="The time zone is assumed to be UTC"
          [control]="snapScheduleForm.get('startDate')"
          [disabled]="isEdit"></cd-date-time-picker>
          <span class="invalid-feedback"
                *ngIf="snapScheduleForm.showError('startDate', formDir, 'required')"
                i18n>This field is required.</span>

        <!-- Repeat interval -->
        <div class="form-item form-item-append"
             cdsRow>
          <div cdsCol>
            <cds-number [id]="'repeatInterval'"
                        [name]="'repeatInterval'"
                        [formControlName]="'repeatInterval'"
                        [label]="'Schedule'"
                        [min]="1"
                        [invalid]="!snapScheduleForm.controls.repeatInterval.valid && (snapScheduleForm.controls.repeatInterval.dirty)"
                        [invalidText]="repeatIntervalError"
                        cdRequiredField="Schedule"></cds-number>
          </div>
          <div cdsCol>
            <cds-select id="repeatFrequency"
                        name="repeatFrequency"
                        formControlName="repeatFrequency"
                        label="Frequency"
                        [invalid]="!snapScheduleForm.controls.repeatFrequency.valid && (snapScheduleForm.controls.repeatFrequency.dirty)"
                        [invalidText]="repeatFrequencyError"
                        *ngIf="repeatFrequencies">
              <option *ngFor="let freq of repeatFrequencies"
                      [value]="freq[1]">{{ freq[0] }}
              </option>
            </cds-select>
            <ng-template #repeatFrequencyError>
              <span class="invalid-feedback"
                    *ngIf="snapScheduleForm.showError('repeatFrequency', formDir, 'notUnique')"
                    i18n>This schedule already exists for the selected directory.</span>
            </ng-template>
            <ng-template #repeatIntervalError>
              <span class="invalid-feedback"
                    *ngIf="snapScheduleForm.showError('repeatInterval', formDir, 'required')"
                    i18n>This field is required.</span>
              <span class="invalid-feedback"
                    *ngIf="snapScheduleForm.showError('repeatInterval', formDir, 'min')"
                    i18n>Choose a value greater than 0.</span>
            </ng-template>
          </div>
        </div>

        <!-- Retention policies -->
        <ng-container formArrayName="retentionPolicies"
                      *ngFor="let retentionPolicy of retentionPolicies.controls; index as i">
          <ng-container [formGroupName]="i">
            <div cdsRow
                 class="form-item form-item-append">
              <div cdsCol
                   [columnNumbers]="{lg: 8}">
                <cds-number [id]="'retentionInterval' + i"
                            [name]="'retentionInterval' + i"
                            [formControlName]="'retentionInterval'"
                            [label]="'Retention policy'"
                            [min]="1"
                            [invalid]="snapScheduleForm.controls['retentionPolicies'].controls[i].invalid && snapScheduleForm.controls['retentionPolicies'].dirty"
                            [invalidText]="retentionPolicyError"></cds-number>
              </div>
              <div cdsCol
                   [columnNumbers]="{lg: 7}">
                <cds-select id="retentionFrequency"
                            name="retentionFrequency"
                            formControlName="retentionFrequency"
                            label="Frequency"
                            *ngIf="retentionFrequencies">
                  <option *ngFor="let freq of retentionFrequencies"
                          [value]="freq[1]">{{ freq[0] }}</option>

                </cds-select>
              </div>
              <div cdsCol
                   [columnNumbers]="{lg: 1}"
                   class="item-action-btn">
                <cds-icon-button kind="tertiary"
                                 size="sm"
                                 (click)="removeRetentionPolicy(i)">
                  <svg cdsIcon="trash-can"
                       size="32"
                       class="cds--btn__icon"></svg>
                </cds-icon-button>
              </div>
            </div>
            <ng-template #retentionPolicyError>
              <span class="invalid-feedback"
                    *ngIf="snapScheduleForm.controls['retentionPolicies'].controls[i].invalid"
                    i18n>This retention policy already exists for the selected directory.</span>
            </ng-template>
          </ng-container>
        </ng-container>

        <div class="form-item">
          <button cdsButton="tertiary"
                  type="button"
                  (click)="addRetentionPolicy()"
                  i18n>
            Add retention policy
            <svg cdsIcon="add"
                 size="32"
                 class="cds--btn__icon"
                 icon></svg>
          </button>
        </div>
      </form>
    </div>
    <cd-form-button-panel (submitActionEvent)="submit()"
                          [form]="snapScheduleForm"
                          [submitText]="(action | titlecase) + ' ' + (resource | upperFirst)"
                          [modalForm]="true"></cd-form-button-panel>
  </ng-container>
</cds-modal>
